<template>
    <div>
        <h1 style="font-weight:bold">欢迎进入学生信息管理</h1>
        <form class="form-inline">
            <label for="name">姓名:</label>
            <input type="text" class="form-control" id="name" placeholder="输入姓名">
            <label for="tel">电话:</label>
            <input type="text" class="form-control" id="tel" placeholder="输入电话">
            <div class="form-group">
                <label for="major">专业:</label>
                <select class="form-control" id="major">
                    <option value="">不限</option>
                    <option v-for="m in major" :key="m" :value="m.major_id">
                        {{m.name}}
                    </option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary" @click="search">查询</button>
        </form>
        <div class="form-group form-inline">
            <label for="pageLimit">每页显示</label>
            <select class="form-control" id="pageLimit" @click="limitChange">
                <option>5</option>
                <option>8</option>
                <option>10</option>
                <option>12</option>
            </select>
            <label for="pageLimit">条数据</label>
            <button type="button" class="btn btn-info" style="margin-left:100px"
             data-toggle="modal" data-target="#myModal" @click="addInit">点击新增数据</button>
        </div>
        <!-- 模态框 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
            
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                    <h4 class="modal-title">新增数据</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
            
                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="newName">姓名:</label>
                                <input type="text" class="form-control" id="newName" placeholder="输入姓名">
                            </div>
                            <div class="radio">
                                <label>性别：</label>
                                <br>
                                <label><input id="Radio1" type="radio" name="optradio" value="0" checked='checkrd'>男</label>
                                <label><input type="radio" name="optradio" value="1">女</label>
                            </div>
                            <div class="form-group">
                                <label for="newTel">电话:</label>
                                <input type="text" class="form-control" id="newTel" placeholder="输入电话">
                            </div>
                            <div class="form-group">
                                <label for="newAge">年龄:</label>
                                <input type="text" class="form-control" id="newAge" placeholder="输入年龄">
                            </div>
                            <div class="form-group">
                                <label for="newMajor">专业:</label>
                                <select class="form-control" id="newMajor">
                                    <option v-for="m in major" :key="m" :value="m.major_id">
                                        {{m.name}}
                                    </option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="newHobby">爱好:</label>
                                <input type="text" class="form-control" id="newHobby" placeholder="输入爱好，逗号分隔">
                            </div>
                        </form>
                        <div class="alert alert-success" v-show="addSuccess">
                            <strong>添加成功!</strong>点击关闭可退出添加界面
                        </div>
                        <div class="alert alert-danger" v-show="errorAddMsg">
                            <strong>都要填写，不能为空!</strong>
                        </div>
                    </div>
            
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" @click="saveNew">保存</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
            
                </div>
            </div>
        </div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>电话</th>
                    <th>年龄</th>
                    <th>专业</th>
                    <th>爱好</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="msg in stuMsg" :key="msg">
                    <td>{{msg.id}}</td>
                    <td>{{msg.name}}</td>
                    <td>
                        <span v-if="msg.sex == 0">男</span>
                        <span v-else>女</span>
                    </td>
                    <td>{{msg.phone}}</td>
                    <td>{{msg.age}}</td>
                    <td>
                        {{major[msg.major_id-1].name}}
                    </td>
                    <td>{{msg.hobby}}</td>
                    <td class="btns">
                        <button type="button" class="btn btn-warning" @click="editor(msg)"
                        data-toggle="modal" data-target="#myModal2">编辑</button>
                        <button type="button" class="btn btn-danger" @click="deleteStu(msg.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 模态框 -->
        <div class="modal fade" id="myModal2">
            <div class="modal-dialog">
            <div class="modal-content">
        
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">信息编辑</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
        
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="oldName">姓名:</label>
                            <input type="text" class="form-control" id="oldName" placeholder="输入姓名">
                        </div>
                        <div class="radio">
                            <label>性别：</label>
                            <br>
                            <label><input id="r1" type="radio" name="optradio2" value="0">男</label>
                            <label><input id="r2" type="radio" name="optradio2" value="1">女</label>
                        </div>
                        <div class="form-group">
                            <label for="oldTel">电话:</label>
                            <input type="text" class="form-control" id="oldTel" placeholder="输入电话">
                        </div>
                        <div class="form-group">
                            <label for="oldAge">年龄:</label>
                            <input type="text" class="form-control" id="oldAge" placeholder="输入年龄">
                        </div>
                        <div class="form-group">
                            <label for="oldMajor">专业:</label>
                            <select class="form-control" id="oldMajor">
                                <option v-for="m in major" :key="m" :value="m.major_id">
                                    {{m.name}}
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="oldHobby">爱好:</label>
                            <input type="text" class="form-control" id="oldHobby" placeholder="输入爱好，逗号分隔">
                        </div>
                    </form>
                    <div class="alert alert-success" v-show="addSuccess">
                        <strong>添加成功!</strong>点击关闭可退出添加界面
                    </div>
                    <div class="alert alert-danger" v-show="errorAddMsg">
                        <strong>都要填写，不能为空!</strong>
                    </div>
                </div>
        
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="editorSave">保存修改</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
        
            </div>
            </div>
        </div>
        <div align="center">
            <pages v-on:pageNum="pageIndexChange($event)" :totalpage="pageNum"/>
        </div>
    </div>
</template>
<script>
import {pageMsgFunction,majorFunction,createFunction,delFunction,edditorFunction} from '../api/pageMsg'
import pages from '../components/pages.vue'
export default {
  components: { pages },
    data() {
        return {
            limit:5,
            offset:1,
            name:'',
            phone:'',
            major_id:0,
            stuMsg:[],
            major:[],
            pageNum:0,
            newStu:{},
            addSuccess:false,
            errorAddMsg:false,
            edditorId:-1
        }
    },
    created(){
        this.getMajor();
        this.getPageMsg()
    },
    methods: {
        getMajor(){
            majorFunction().then(res => {
                this.major = res.data.data
                // console.log(this.major)
            })
        },
        getPageMsg(){
            pageMsgFunction(this.$route.query.token,this.limit,this.offset).then(res => {
                // console.log(res)
                var p = 0
                p = res.data.data.count%this.limit
                if(p>0){
                    this.pageNum = parseInt(res.data.data.count/this.limit)+1
                }else{
                    this.pageNum = res.data.data.count/this.limit
                }
                // console.log(this.pageNum)
                this.stuMsg = res.data.data.rows
            })
        },
        pageIndexChange(pageIndex){
            pageMsgFunction(this.$route.query.token,this.limit,pageIndex).then(res => {
                // console.log(res)
                this.stuMsg = res.data.data.rows
            })
        },
        search(){
            this.name = $('#name').val()
            this.phone = $('#tel').val()
            this.major_id = $('#major').val()
            // console.log(this.name,this.phone,major)
            pageMsgFunction(this.$route.query.token,this.limit,this.offset,this.name,this.phone,this.major_id).then(res => {
                console.log(res)
                this.stuMsg = res.data.data.rows
            })
        },
        limitChange(){
            // console.log(this.limit)
            this.limit = parseInt($('#pageLimit').val())
            this.getPageMsg()
        },
        addInit(){
            this.addSuccess = false
            this.errorAddMsg = false
            $('#newName').val('')
            $('#newTel').val('')
            $("#Radio1").prop('checked', true)
            $('#newAge').val('')
            $('#newMajor').val('1')
            $('#newHobby').val('')
        },
        saveNew(){
            this.newStu.name = $('#newName').val()
            this.newStu.phone = $('#newTel').val()
            this.newStu.sex = parseInt($("input[name='optradio']:checked").val())
            this.newStu.age = parseInt($('#newAge').val())
            this.newStu.major_id = parseInt($('#newMajor').val())
            this.newStu.hobby = $('#newHobby').val()
            // console.log(this.newStu)
            createFunction(this.$route.query.token,this.newStu).then(res => {
                // console.log(res)
                if(res.data.success == true){
                    this.addSuccess = true
                    this.errorAddMsg = false
                }
                else{
                    this.addSuccess = false
                    this.errorAddMsg = true
                }
            })
        },
        editor(msg){
            $('#oldName').val(msg.name)
            $('#oldTel').val(msg.phone)
            if(msg.sex == 0){
                $("#r1").prop('checked', true)
            }
            else{
                $("#r2").prop('checked', true)
            }
            $('#oldAge').val(msg.age)
            $('#oldMajor').val(msg.major_id)
            $('#oldHobby').val(msg.hobby)
            this.edditorId = msg.id
        },
        editorSave(){
            var newStu = {}
            newStu.id = this.edditorId
            newStu.name = $('#oldName').val()
            newStu.sex = parseInt($("input[name='optradio2']:checked").val())
            newStu.phone = $('#oldTel').val()
            newStu.age = parseInt($('#oldAge').val())
            newStu.major_id = parseInt($('#oldMajor').val())
            newStu.hobby = $('#oldHobby').val()
            edditorFunction(this.$route.query.token,newStu).then(res => {
                if(res.data.success == true){
                    alert("修改成功")
                    location. reload()
                }else{
                    alert('修改失败！所填值不能为空')
                }
            })
        },
        deleteStu(id){
            var r=confirm("是否删除id为"+id+"的记录");
            if (r==true){
                delFunction(this.$route.query.token,parseInt(id)).then(res => {
                    console.log(res.data)
                    location. reload()
                    alert('删除成功！')
                })
            }
        }
    },
}
</script>
<style>
.btns button{
    margin-right: 20px;
}
.form-inline{
    margin: 30px 0;
}
.form-inline input,.form-inline select{
    margin: 0 10px;
}
.radio label{
    margin-right: 30px;
}
</style>